<template>
    <div class="app-container">
      <uc-table url="admin/examine/getInExamineContractPage" name="检测合同" ref="contractTable" pageable table-border :search-form="searchForm">
          <template slot="searchForm">
              <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
                  <!--搜索输入框-->
                  <el-form-item v-if="!enterPriseHidden">
                      <el-input type="text" v-model="searchForm.enterpriseName" placeholder="请输入安全企业名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item v-if="!examineHidden">
                      <el-input type="text" v-model="searchForm.examineName" placeholder="请输入监测企业名称" clearable></el-input>
                  </el-form-item>
                  <!--搜索按钮--新增按钮-->
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" class="filter-item" @click="handleAdd()">新增合同</el-button>
                  </el-form-item>
              </el-form>
          </template>
          <template slot="columns">
              <el-table-column prop="name" label="合同名称" align="left"></el-table-column>
              <el-table-column prop="enterpriseName" label="安全企业" align="left"></el-table-column>
              <el-table-column prop="examineName" label="检测企业" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="startDate" label="合同开始日期" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="endDate" label="合同结束日期" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="cycle" label="合同状态" align="left" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag
                      :type="scope.row.status === '0' ? 'success' : 'danger'"
                      disable-transitions>{{scope.row.status === '0' ? '正常' : '过期'}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                      <!--编辑按钮-->
                      <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </template>
      </uc-table>
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="合同名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入合同名称"/>
          </el-form-item>
          <el-form-item label="检测企业" prop="examineId">
            <el-select v-model="form.examineId" placeholder="请选择检测企业" style="width: 100%">
              <el-option v-for="(item,index) in examineList" :key="index" :value="item.ucId"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起止日期" prop="examineDates">
            <el-date-picker
              v-model="form.examineDates"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              @change="dateChange"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open=false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import UcTable from "@/components/UcTable/index.vue";
import {getEnterprisesByType} from "@/api/enterpriseDominant";
import {addInExamineContract, deleteInExamineContract, updateInExamineContract} from "@/api/examineContract.js";
export default {
    name: "examineContractList",
    components: {UcTable},
    data(){
        return{
          searchForm:{},
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          form: {
            name:null,
            examineId:null,
            examineDates:[]
          },
          rules:{
            name:[
              { required: true, message: '合同名称不能为空', trigger: 'blur' }
            ],
            examineId: [
              { required: true, message: '检测企业不能为空', trigger: 'blur' }
            ],
            examineDates: [
              { required: true, message: '合同起止日期不能为空', trigger: 'blur' }
            ]
          },
          examineList: [],
        }
    },
    computed:{
      enterPriseHidden(){
        const roleCode = this.$store.getters.roleCode
        return roleCode=="XZ-ADMIN"||roleCode=="XZ-YH"
      },
      examineHidden(){
        const roleCode = this.$store.getters.roleCode
        return roleCode=="JC-ADMIN"||roleCode=="JC-YH"
      }
    },
    created() {
      this.getExamineList()
    },
    methods:{
      //检测企业列表
      getExamineList(){
        getEnterprisesByType({dominantType:8}).then(res=>{
          this.examineList = res.data;
        })
      },
      //合同起止日期选择事件
      dateChange(val){
        console.log(val)
        this.form.startDate = val[0]
        this.form.endDate = val[1]
      },
      //查询
      handleSearch(){
        this.$refs.contractTable.getTableData(1)
      },
      //新增
      handleAdd(){
        this.resetForm('form')
        this.title = "新增合同"
        this.open = true
      },
      //编辑
      handleEdit(row){
        this.resetForm('form')
        this.title = "编辑合同"
        this.form.ucId = row.ucId
        this.form.name = row.name
        this.form.examineDates = [row.startDate,row.endDate]
        this.form.examineId = row.examineId
        this.open = true
      },
      //删除
      handleDelete(row){
          this.$confirm('确认删除该条数据？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
            deleteInExamineContract({ucId:row.ucId}).then(res=>{
                  this.$notify.success({
                      title: '成功',
                      message: "删除成功"
                  })
                  this.handleSearch()
              }).catch(res=>{
                  this.$notify.error({
                      title: '失败',
                      message: res.msg
                  })
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      //新增、编辑
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.form.ucId){
              updateInExamineContract(this.form).then(res=>{
                this.$notify.success({
                  title: '成功',
                  message: "更新成功"
                })
                this.open = false;
                this.handleSearch();
              })
            }else{
              addInExamineContract(this.form).then(res=>{
                this.$notify.success({
                  title: '成功',
                  message: "保存成功"
                })
                this.open = false;
                this.handleSearch();
              })
            }
          }
        });
      }
    }
}
</script>

<style scoped>

</style>
